@charset "utf-8";

/*
商品一覧部分
------------------------------------------*/
.ranking-gp {
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 8.9rem;
}
.ranking-item-inner {
    display: flex;
}

.ranking-item-inner-img {
    display: flex;
    align-items: center;
    column-gap: 2.424rem;
}

.ranking-item-inner-img-area {
    width: 29.2rem;
}

.ranking-item-inner-img-area img {
    width: 100%;
    height: auto;
    aspect-ratio: 292 / 202;
}

.ranking-item-inner-info {
    width: 25.28%;
    margin-right: 2.8rem;
    margin-left: 3.9rem;
    word-break: break-all;
}

.ranking-item-inner-info h3 {
    font-size: 3.2rem;
    line-height: calc(38 / 32);
}

.ranking-item-inner-info-base-price {
    font-size: 1.6rem;
    line-height: calc(38 / 16);
    display: block;
}

.ranking-item-inner-info-price {
    font-size: 2.6rem;
    line-height: calc(38 / 26);
    display: block;
    margin-bottom: 4.2rem;
}

.ranking-item-inner-info a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #fff;
    background-color: #394D80;
    max-width: 299px;
    height: 50px;
}

.ranking-item-inner-detail {
    max-width: 68.6rem;
    font-size: 1.6rem;
    line-height: calc(24 / 16);
    flex: 1;
    word-break: break-all;
}

@media screen and (max-width: 1500px) {
    .ranking-item-inner {
        flex-wrap: wrap;
        row-gap: 2.4rem;
        column-gap: 1.6rem;
    }

    .ranking-item-inner-info {
        margin-right: unset;
        margin-left: unset;
    }

    .ranking-item-inner-info h3 {
        font-size: 2.8rem;
    }

    .ranking-item-inner-detail {
        max-width: unset;
        width: 100%;
    }

    .ranking-item-inner-img,
    .ranking-item-inner-info {
        width: calc((100% - 1.6rem) / 2);
    }

    .ranking-item-inner-img {
        column-gap: 1rem;
    }

    .ranking-item-inner-img-area {
        width: unset;
        flex: 1;
    }
}


/* タブレットサイズ */
@media screen and (max-width: 834px) {
    .ranking-gp {
        padding-right: unset;
        padding-left: unset;
    }

    .ranking-item-inner {
        justify-content: center;
    }
}

/* スマホサイズ */
@media screen and (max-width: 600px) {
    .ranking-gp {
        row-gap: 4rem;
        margin-top: 4rem;
    }

    .ranking-item-inner-img,
    .ranking-item-inner-info {
        width: 100%;
    }

    .ranking-item-inner-info-price {
        margin-bottom: 1.6rem;
    }

    .ranking-item-inner-info a {
        margin-right: auto;
        margin-left: auto;
    }
}


/*
価格帯リスト部分
------------------------------------------*/
.ranking-list-ttl {
    margin-top: 6.6rem;
}

.ranking-list-gp {
    margin-top: 6.4rem;
    column-gap: 5.4rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 4.7rem;
    justify-content: space-between;
}

.ranking-list-item {
    font-size: 2.8rem;
    width: calc((100% - 10.8rem) / 3);
    height: 80px;
    border: 1px solid #707070;
    /* display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 8.2rem;
    padding-right: 2.85rem; */
}

.ranking-list-item a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 8.2rem;
    padding-right: 2.85rem;
}


@media screen and (max-width: 1650px) {
    .ranking-list-item a {
        padding-left: 2.85rem;
    }
}

@media screen and (max-width: 1400px) {
    .ranking-list-item a {
        padding-right: 1.6rem;
        padding-left: 1.6rem;
    }
}

@media screen and (max-width: 1300px) {
    .ranking-list-gp {
        column-gap: 2rem;
    }

    .ranking-list-item {
        width: calc((100% - 4rem) / 3);
        font-size: 2rem;
    }
}

@media screen and (max-width: 1135px) {
    .ranking-list-item {
        width: calc((100% - 4rem) / 2);
    }
}

@media screen and (max-width: 860px) {
    .ranking-list-gp {
        column-gap: 1.6rem;
    }

    .ranking-list-item {
        width: calc((100% - 3.2rem) / 2);
    }
}

/* スマホサイズ */
@media screen and (max-width: 600px) {
    .ranking-list-item {
        width: 100%;
        max-width: 440px;
        margin-right: auto;
        margin-left: auto;
    }

    .ranking-list-gp {
        margin-top: 3.2rem;
        row-gap: 2rem;
    }
}